<!-- 薪酬-基础设置-企业设置 -->
<template>
  <pageHeaderNew
    :title="title"
    :breadCrumb="breadCrumb"
    showBack
  ></pageHeaderNew>
  <div class="wrap">
    <header>
      <a-tag class="tag" bordered color="rgba(61, 126, 255, 0.117647058823529)">
        请先在【薪酬设置】设置企业的工资表模板，然后新增计薪规则【计时工资 ->
        计件工资 -> 绩效规则 -> 津补贴规则 -> 计税规则 -> 考勤计薪规则 -> 薪资组
      </a-tag>
    </header>
    <main>
      <div>
        <h2>固定工资设置</h2>
        <div>
          设置企业的固定工资是否区分试用期工资及转正工资，隐藏后则当月工资表、薪酬报表以及员工薪资不显示试用期工资
        </div>
        <a-switch size="medium" style="margin-top: 10px" />
      </div>

      <div style="margin-top: 60px">
        <h2>计薪周期</h2>
        <div>
          从1号开始
          <a-button type="text">修改</a-button>
        </div>
        <a-switch size="medium" style="margin-top: 10px" />
      </div>

      <div style="margin-top: 60px">
        <h2>发薪日期设置</h2>
        <div>
          设置企业的固定工资是否区分试用期工资及转正工资，隐藏后则当月工资表、薪酬报表以及员工薪资不显示试用期工资
        </div>
        <a-switch size="medium" style="margin-top: 10px" />

        <a-form>
          <a-form-item label="发薪日" showColon>
            <a-select style="width: 200px">
              <a-option>1日</a-option>
            </a-select>
          </a-form-item>
          <a-form-item label="提醒时间" showColon>
            <a-select style="width: 200px">
              <a-option>1日</a-option>
            </a-select>
          </a-form-item>
          <a-form-item label="通知接收人" showColon field="">
            <a-select style="width: 200px">
              <a-option>1日</a-option>
            </a-select>
          </a-form-item>
        </a-form>
      </div>
    </main>
    <footer>
      <a-button type="primary" style="margin-right: 20px">保存</a-button>
      <a-button type="outline">返回</a-button>
    </footer>
  </div>
</template>

<script lang="ts" setup>
const title = '企业设置';

const breadCrumb: string[] = ['薪酬', '基础设置', '薪酬设置', '企业设置'];

let modalVisible = ref(false); // 判断新增弹出框是否打开
let currData = ref(); // 储存当前选中数据
let tableRef = ref();
let nameSearch = ref(''); // 搜索框值

// 新增
const add = (record: any) => {
  modalVisible.value = true;
};

// 获取表格数据
const getTableData = async () => {
  try {
    // originData.value = await GetHumanChangeSetting({
    //   typeId: 1 // 人事异动默认传1
    // });
    // const res: any = originData.value.find(
    //   (item: any) => item.id === currId.value
    // );
    // res.content = res.personnelChange;
    // return Promise.resolve(res.personnelChange);
  } catch (error: unknown) {
    console.log(error);
  }
};

// 编辑
const goEdit = (record: any) => {
  console.log(record);
  currData.value = record;
  modalVisible.value = true;
};

// 删除某一行
const del = async (id: number) => {
  try {
    // await DelHumanChangeSetting({ id });
    refresh();
  } catch (error: unknown) {
    console.log(error);
  }
};

// 弹窗自定义事件
const holidayTypeAdd = async (record: any) => {
  //
};

// 刷新表格数据
const refresh = () => {
  tableRef.value.loadData();
};
</script>

<style lang="less" scoped>
.wrap {
  padding: 10px 20px;
  display: grid;
  grid-template-rows: 60px 1fr 60px;

  .tag {
    height: 48px;
    color: #000;
    background-color: rgba(61, 126, 255, 1);
    width: 100%;
    font-size: 15px;
  }

  h2 {
    padding: 0 0 10px 5px;
    border-bottom: 1px solid #cacaca;
  }

  footer {
    position: sticky;
    bottom: 0;
    display: flex;
    width: 100%;
    height: 60px;
    background-color: #f3f6fa;
    justify-content: center;
    align-items: center;
  }
}
</style>
